var laypage = layui.laypage;
var layer = layui.layer;
var form = layui.form;

// ?? 定义请求参数对象
let query = {
  advposdesc: '',  //广告位描述
  advposname: '', // 广告位名称
  page: 1, // 第几页数据
  limit: 5  // 每页的数量
}
// todo 1、 获取广告位列表
getAdList()
async function getAdList() {
  try {
    const { data: { data } } = await axios.get('/ydd_advpos/list', { params: query })
    // console.log(data);
    let str = data.data.map((item, index) => `<tr>
      <td>${item.id}</td>
      <td>${item.advposname}</td>
      <td>${item.advposdesc}</td>
      <td>${item.default_data}</td>
      <td>${item.advpossize}</td>
      <td>
        <div class="lxj_oper_circle">
          <i class="layui-icon layui-icon-edit lxj_edit" data-id=${item.id}></i>
        </div>
        <div class="lxj_oper_circle">
          <i class="layui-icon layui-icon-delete lxj_delete" data-id=${item.id}></i>
        </div>
      </td>
    </tr>`).join('')
    $('tbody').html(str)
    render(data.count)
  } catch (error) {
    console.log(error.response);
  }
}

// todo 2、 渲染表格的分页
function render(count) {
  var laypage = layui.laypage;
  //执行一个laypage实例
  laypage.render({
    elem: 'lxj_renderpage',
    count: count,//数据总数，从服务端得到
    limits: [1, 2, 5, 8, 10],
    limit: query.limit,  // 当前每页条数
    curr: query.page,   // 当前第几页
    theme: '#409eff',
    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
    jump(obj, first) {
      //obj包含了当前分页的所有参数，比如：
      // console.log(obj.curr);  //得到当前页，以便向服务端请求对应页的数据。
      // console.log(obj.limit); //得到每页显示的条数
      query.page = obj.curr
      query.limit = obj.limit
      //首次不执行
      if (!first) {
        getAdList()
      }
    }
  });
}



// todo   3、关闭或显示搜索区
let openorclose = true
$('.lxj_circle:nth-child(1)').on('click', function () {
  if (openorclose) {
    $('#lxj_serach').hide()
    openorclose = false
  } else {
    $('#lxj_serach').show()
    openorclose = true
  }
})
// todo 3-1 刷新功能
$('.lxj_circle:nth-child(2)').on('click', function () {
  getAdList()
})

// todo 4、 点击显示新增广告位弹窗
var addposindex  // 添加广告位弹框index
const addposStr = `<form id="lxj_addForm" class="layui-form">
    <!-- 第一行 -->
    <div class="layui-form-item">
      <label class="layui-form-label">广告位名称</label>
      <div class="layui-input-block">
        <input type="text"  name="advposname"  lay-verify="required" placeholder="请输入广告位名称" autocomplete="off" style="width: 250px"
          class="layui-input">
      </div>
    </div>
    <!-- 第二行   -->
    <div class="layui-form-item">
      <label class="layui-form-label">广告位描述</label>
      <div class="layui-input-block">
        <textarea name="advposdesc" lay-verify="required" placeholder="请输入广告位描述" class="layui-textarea" style="width: 250px"></textarea>
      </div>
    </div>
     <!-- 第三行   -->
     <div class="layui-form-item">
      <label class="layui-form-label">广告位尺寸</label>
      <div class="layui-input-block">
        <input type="text" name="advpossize"  lay-verify="required" placeholder="请输入广告位尺寸" autocomplete="off" style="width: 250px"
          class="layui-input">
      </div>
    </div>
    <!-- 第四行 按钮 -->
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit>新增</button>
      </div>
    </div>
  </form>`
$(".lxj_btn").on('click', function () {
  addposindex = layer.open({
    type: 1,
    title: ['添加广告位', 'font-size:18px;color:blue'],
    content: addposStr,
    area: ['683px', '380px'],
  })
})
// todo 4-1 新增广告位
// !js创建的 我们应该用事件委托
$('body').on('submit', '#lxj_addForm', async function (e) {
  e.preventDefault()
  const adddata = $(this).serialize()
  try {
    await axios.post('/ydd_advpos/add', adddata)
    layer.close(addposindex)
    layer.msg('新增广告位成功！')
    getAdList()
  } catch (error) {
    console.log(error);
  }
})



//todo  5、点击弹出修改广告位弹窗
var editposvindex  // 修改广告位弹框index
const editposStr = `<form id="lxj_editForm" class="layui-form" lay-filter="FormTes">
<!-- 显示id-->
<div class="layui-form-item layui-hide">
  <label class="layui-form-label">id</label>
  <div class="layui-input-block">
    <input type="text" name="id" required readonly autocomplete="off" style="width: 250px"
      class="layui-input">
  </div>
</div>
<!-- 第一行 -->
<div class="layui-form-item">
  <label class="layui-form-label">广告位名称</label>
  <div class="layui-input-block">
    <input type="text" name="advposname" required lay-verify="required" placeholder="请输入广告位名称" autocomplete="off" style="width: 250px"
      class="layui-input">
  </div>
</div>
<!-- 第二行   -->
<div class="layui-form-item">
  <label class="layui-form-label">广告位描述</label>
  <div class="layui-input-block">
    <textarea name="advposdesc" placeholder="请输入广告位描述" class="layui-textarea" style="width: 250px"></textarea>
  </div>
</div>
 <!-- 第三行   -->
 <div class="layui-form-item">
  <label class="layui-form-label">广告位尺寸</label>
  <div class="layui-input-block">
    <input type="text" name="advpossize" required lay-verify="required" placeholder="请输入广告位尺寸" autocomplete="off" style="width: 250px"
      class="layui-input">
  </div>
</div>
<!-- 第四行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit>修改</button>
  </div>
</div>
</form>`
//  todo 5-1 事件委托 给修改按钮绑定事件编辑
$('.lxj_table').on('click', '.lxj_edit', async function () {
  editposvindex = layer.open({
    type: 1,
    title: ['修改广告位', 'font-size:18px;color:orange'],
    content: editposStr,
    area: ['683px', '380px'],
  })
  const id = $(this).attr('data-id')
  const { data: { data } } = await axios.get('/ydd_advpos/rowInfo', { params: { id } })
  // console.log(data);
  form.val("FormTes", data)
})
// todo 5-2 成功回显数据 监听提交 发送请求修改数据
$('body').on('submit', '#lxj_editForm', async function (e) {
  e.preventDefault()
  const editdata = $(this).serialize()
  try {
    await axios.post('/ydd_advpos/update', editdata)
    layer.close(editposvindex)
    layer.msg('修改广告位信息成功！')
    getAdList()  //重新渲染一下
  } catch (error) {
    layer.msg(error);
  }
})


// todo 6、 删除数据
$('.lxj_table').on('click', '.lxj_delete', function () {
  const did = $(this).attr('data-id')
  layer.confirm('确认删除吗？', { icon: 3, title: '提示' }, async function (index) {
    const { data } = await axios.get('/ydd_advpos/del', { params: { id: did } })
    if (data.errno !== 0) {
      // 删除失败
      return layer.msg(data.errmsg)
    }
    // 删除成功
    layer.msg('删除成功！')
    layer.close(index);
    getAdList()
  });
})


// todo 搜索与重置功能
const serach_value = $('input[name=advpos_title]')
$('button[type=search]').on('click', function () {
  // console.log(serach_value.val());  拿到输入框的值重新发请求
  query.advposname = serach_value.val()
  getAdList()
})
$('button[type=reset]').on('click', function () {
  serach_value.val('')
  query.advposname = ''
  getAdList()
})



//todo 筛选功能
let is = true
$('.lxj_circle:nth-child(3)').on('click', function () {
  if (is) {
    is = false
    $('.filter-box').show()
  } else {
    $('.filter-box').hide()
    is = true
  }
})